<template>
	<view class="">
		<view class="classify">
			<!-- 侧边导航栏 -->
				<scroll-view scroll-y="true" class="nav">
					<view :class="['nav_item',navindex == index ? 'nav_item_i': '']" v-for="(item, index) in navList " @tap="oneclassify(index)">
						<view class="nav_item_title">
							{{item.navtitle}}
						</view>
						<view v-if="navindex == index" 
						@tap="changetwoclassify(key)"
						:class="['nav_item_two', navtwoindex == key ? 'nav_item_two_i':'']" 
						v-for="(items,key) in item.classTwo">
							{{items.title}}
						</view>
					</view>
			<!-- 		<uni-collapse accordion="true">
					    <uni-collapse-item :title="item.navtitle" showAnimation v-for="(item, index) in navList ">
					        <view style="padding: 30rpx;">
					            手风琴效果
					        </view>
					    </uni-collapse-item>
					   <uni-collapse-item title="标题文字" showAnimation>
					        <view style="padding: 30rpx;">
					            手风琴效果
					        </view>
					    </uni-collapse-item>
					    <uni-collapse-item title="标题文字" showAnimation>
					        <view style="padding: 30rpx;">
					            手风琴效果
					        </view>
					    </uni-collapse-item>
					</uni-collapse> -->
				</scroll-view>
				<!-- 右侧商品 -->
				<view class="product">
					<view class="product_banner">
						<image src="../../static/image/mine/index/classify_banner.png" mode=""></image>
					</view>
					<view class="product_nav">
						<view class="product_nav_item" v-for=" (choosetab,index) in productnav">
							{{choosetab.title}}
						</view>
					</view>
					<scroll-view scroll-y="true"  class="product_list">
						<product :productList="productList"></product>
					</scroll-view>
				</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import product from '@/components/classify/product.vue'
	export default {
		components: {uniCollapse,uniCollapseItem ,product},
		data () {
			return {
				navindex: 0,
				navtwoindex: 0,
				productnav: [
					{
						title: '默认排序',
						icon: ''
					},
					{
						title: '筛选',
						icon: ''
					}
				],
				productList: [
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '1'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '2'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '1'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '1'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '1'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume: '1'
					}
				],
				navList: [
					{
						navtitle: '蔬菜水果',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '肉禽水产',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '粮油副食',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '蔬食素食',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					}
				]
			}
		},
		methods: {
			oneclassify (index) {
				this.navindex = index
			},
			changetwoclassify (key) {
				this.navtwoindex = key
			}
		}
	}
</script>

<style lang="less" scoped>
	.classify {
		display: flex;
		justify-content: space-between;
	}
	.nav {
		height: 76vh;
		// height: 100%;
		// max-height: calc( 100%- 100upx);
		.nav_item {
			width: 150upx;
			background-color: #f9f9f9;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			.nav_item_title {
				font-size: 28upx;
				color: #666666;
				height: 80upx;
				line-height: 80upx;
			}
			.nav_item_two {
				display: inline-block;
				font-size: 28upx;
				color: #000;
				height: 74upx;
				line-height: 74upx;
				border-bottom: 2upx solid #E1E1E1;
			}
			.nav_item_two:last-child {
				border-bottom: none;
			}
		}
		.nav_item_i {
			width: 159upx;
			background-color: #FFFFFF;
			border-top-right-radius: 10upx;
			border-bottom-right-radius: 10upx;
			box-shadow: 4upx 0 8upx 0 #e1e1e1;
			position: relative;
			z-index: 5;
			.nav_item_title {
				font-size: 32upx;
				color: #000000;
				font-weight: bold;
			}
			.nav_item_two_i {
				color: #fc5c2f;
			}
		}
	}
	.product {
		flex: 1;
		padding-right: 15upx;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.product_banner {
			width: 560upx;
			height: 164upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.product_nav {
			width: 100%;
			height: 64upx;
			border-bottom: 2upx solid #E1E1E1;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.product_nav_item {
				flex: 1;
				text-align: center;
				height: 36upx;
				font-size: 24upx;
				line-height: 36upx;
				border-right: 2upx solid #E1E1E1;
			}
			.product_nav_item:last-child {
				border-right: none;
			}
		}
		.product_list {
			height: 800upx;
		}
	}
</style>
